<template>
  <SysDialog
      :title="dialog.title"
      :width="dialog.width"
      :height="dialog.height"
      :visible="dialog.visible"
      @onClose="onClose"
      @onConfirm="onConfirm"
  >
    <template #content>
      <a-form labelAlign="right">
        <a-form-item
            v-bind="validateInfos.courseName"
            :labelCol="{ style: 'width:80px;' }"
            label="课程名称"
        >
          <a-input v-model:value="addModel.courseName" placeholder="请填写课程名称"></a-input>
        </a-form-item>
        <a-row>
          <a-col :span="12">
            <a-form-item
                v-bind="validateInfos.courseYear"
                :labelCol="{ style: 'width:80px;' }"
                label="学年"
            >
              <a-date-picker
                  placeholder="请选择学年"
                  @openChange="openChange"
                  style="width:100%;"
                  v-model:value="inputYear"
                  picker="year"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item
                v-bind="validateInfos.courseType"
                :labelCol="{ style: 'width:80px;' }"
                label="学期"
            >
              <a-radio-group v-model:value="addModel.courseType">
                <a-radio :value="'0'">春季</a-radio>
                <a-radio :value="'1'">秋季</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item
            v-bind="validateInfos.courseColor"
            :labelCol="{ style: 'width:80px;' }"
            label="背景颜色"
        >
          <a-input v-model:value="addModel.courseColor" placeholder="请填写背景颜色"></a-input>
        </a-form-item>
      </a-form>
    </template>
  </SysDialog>
</template>
<script setup lang='ts'>
import {reactive, ref} from 'vue'
import SysDialog from '@/components/SysDialog.vue';
import dayjs from 'dayjs';
import {useForm} from 'ant-design-vue/lib/form';

import useDialog from "@/hooks/useDialog";
import {EditType, Title} from "@/type/BaseEnum";
import useInstance from "@/hooks/useInstance";
//年份数据
const inputYear = ref()
//获取全局global
const { global } = useInstance()
//弹出框属性
const {dialog,onClose,onShow} = useDialog()
//表单验证规则
const rules = reactive({
  courseName: [{
    required: true,
    message: '请输入课程名称',
    trigger: 'change'
  }],
  courseType: [{
    required: true,
    message: '请选择学期',
    trigger: 'change'
  }],
  courseYear: [{
    required: true,
    message: '请选择年份',
    trigger: 'change'
  }],
  courseColor: [{
    required: true,
    message: '请填写背景色',
    trigger: 'change'
  }],
})
//表单绑定的数据
const addModel = reactive({
  courseId: '',
  courseName: '',
  courseType: '',
  courseYear: '',
  courseColor: '',
  type: ''
})
//获取表单验证相关的属性
const {resetFields, validate, validateInfos} = useForm(addModel, rules)
//日历事件
const openChange = () => {
  addModel.courseYear = dayjs(inputYear.value).format('YYYY')
}
//注册时间
const emits = defineEmits(['save'])
//弹框确定事件
const onConfirm = () => {
  validate().then(async () => {
    emits('save',addModel)
    onClose()
  })

}
// 显示弹框
const show = (type:any,row:any) => {
  // 清空表单
  resetFields()
  if (type === EditType.ADD){
    inputYear.value = undefined;
    dialog.title = Title.ADD
  }else if (type === EditType.EDIT){
    dialog.title = Title.EDIT
    // 编辑回显
    global.$objCopy(row,addModel)
    // 时间回显
    inputYear.value = dayjs(row.courseYear)

  }

  addModel.type = type

  //弹框显示
  onShow();
}
//暴露方法给外部使用
defineExpose({
  show
})
</script>
<style scoped lang='scss'>
</style>
